<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@	taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE HTML>
<html>
<head>

<link href="<%=request.getContextPath()%>/static/datatables/media/css/datatables_bootstrap.css"
	rel="stylesheet" media="screen">
<link href="http://fuelcdn.com/fuelux/2.3/css/fuelux.css" 
	rel="stylesheet"  media="screen"/>
<link href="http://fuelcdn.com/fuelux/2.3/css/fuelux-responsive.css" 
	rel="stylesheet"  media="screen"/>
<link href="<%=request.getContextPath()%>/static/bootstrap-select/css/bootstrap-select.min.css"
	rel="stylesheet" media="screen">
<link href="<%=request.getContextPath()%>/static/bootstrap-datapicker/css/datepicker.css"
	rel="stylesheet" media="screen">
<script src="<%=request.getContextPath()%>/static/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="<%=request.getContextPath()%>/static/datatables/media/js/datatables_bootstrap.js"></script>
<script src="<%=request.getContextPath()%>/static/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="<%=request.getContextPath()%>/static/bootstrap-datapicker/js/bootstrap-datepicker.js"></script>
<script src="<%=request.getContextPath()%>/static/fuelux/spinner.js"></script>

<title><spring:message code="text_project_name" text="Pomodoro" />
</title>
<style>
#createActivityForm {
	text-align: center;
}
#activity_table {
	margin-bottom: 0 !important;
}
#table-content {
	margin-bottom: 5px;
}
.insertedinput{
	width: 96% !important;
	margin: 0 2% !important; 
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.fuelux .spinner-input{
	margin: 0 !important;
}
#activity_table .bootstrap-select-btn{
	width: 100% !important;	
}

#activity_table .bootstrap-select{
	width: 100% !important;
	margin: 0 !important;
}
#newActivityError .alert{
	margin: -6px 0 4px 0;
	height: 18px;
}
</style>
</head>
<body>
<% boolean hasRunningRound = (Boolean)request.getAttribute("hasRunningRound");  %>	
	<div class="row-fluid">
		<div class="box-header container-fluid">
			<span class="header-text"><spring:message code="text_myactivity" text="My Activity" /></span>
			<div class="pull-right">
				<a id="saveNewActivityBtn" style="display:none;" class="btn btn-mini btn-primary" title="<spring:message code="text_savenewactivity" text="Save" />" href="#">
					<i class="icon-save icon-white"></i>
				</a>
				<a id="newActivityBtn" class="btn btn-mini btn-success" title="<spring:message code="text_newactivity" text="Create Activity" />" href="#">
					<i class="icon-plus icon-white"></i>
				</a> 
			</div>
		</div>
		<div class="border-notop-padding">				
			<table id="activity_table" class="table table-hover table-condensed table-bordered">
				<thead>
					<tr>
						<th>No.</th>
						<th><spring:message code="text_date" text="Date" /></th>
						<th><spring:message code="text_activityname" text="Activity Name" /></th>												
						<th><spring:message code="text_activitypriority" text="Priority" /></th>
						<th><spring:message code="text_activityestimation" text="Estimation" /></th>
						<th><spring:message code="text_activitydesc" text="Description" /></th>	
						<th><spring:message code="text_activityaction" text="Action" /></th>						
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${activities}" var="activity" varStatus="status">
					<tr>
						<td>${status.count}</td>
						<td><fmt:formatDate value="${activity.planDate}" pattern="yyyy-MM-dd"/></td>
						<td>${activity.name}</td>						
						<td>						
						<c:choose>
						    <c:when test="${activity.priority == 2}">
						    	<span class="label label-important" priority="2">
						    		<spring:message code="text_priorityveryhigh" text="Very High" />
								</span>
						    </c:when>
						    <c:when test="${activity.priority == 1}">
						        <span class="label label-warning" priority="1">
						        	<spring:message code="text_priorityhigh" text="High" />
								</span>
						    </c:when>
						    <c:otherwise>
						        <span class="label label-success" priority="0">
						        	<spring:message code="text_prioritynormal" text="Normal" />
								</span>
						    </c:otherwise>
						</c:choose>
						</td>
						<td>${activity.estimation}</td>
						<td>${activity.description}</td>
						<td>						
							<a class="btn btn-info btn-small <c:if test="${hasRunningRound}">disabled</c:if>" 
								href="<c:choose><c:when test="${hasRunningRound}">#</c:when><c:otherwise><%=request.getContextPath()%>/pages/gotoround?activity_id=${activity.id}</c:otherwise></c:choose>"					
								title="<c:choose><c:when test="${hasRunningRound}"><spring:message code="text_hasrunninground" text="You already have a running round" /></c:when><c:otherwise><spring:message code="text_startround" text="Start Round" /></c:otherwise></c:choose>"> 
								<i class="icon-play icon-white"></i>
							</a>
							<a class="btn btn-success btn-small <c:if test="${hasRunningRound}">disabled</c:if>" 
								href="<c:choose><c:when test="${hasRunningRound}">#</c:when><c:otherwise><%=request.getContextPath()%>/pages/finishactivity?activity_id=${activity.id}</c:otherwise></c:choose>"  
								title="<c:choose><c:when test="${hasRunningRound}"><spring:message code="text_hasrunninground" text="You already have a running round" /></c:when><c:otherwise><spring:message code="text_finished" text="Finished" /></c:otherwise></c:choose>"> 
								<i class="icon-ok icon-white"></i>
							</a>
							<a class="btn btn-danger btn-small <c:if test="${hasRunningRound}">disabled</c:if>" 
								href="<c:choose><c:when test="${hasRunningRound}">#</c:when><c:otherwise><%=request.getContextPath()%>/pages/deleteactivity?activity_id=${activity.id}</c:otherwise></c:choose>" 
								title="<c:choose><c:when test="${hasRunningRound}"><spring:message code="text_hasrunninground" text="You already have a running round" /></c:when><c:otherwise><spring:message code="text_delete" text="Delete" /></c:otherwise></c:choose>"> 
								<i class="icon-remove icon-white"></i>
							</a>	
						</td>						
					</tr>
				</c:forEach>																																								
				</tbody>
			</table>
		</div>	
	</div>
	<script>
		$.extend($.fn.dataTableExt.oSort, {
		    "activity-row-num-sort-asc": function(a, b) {
		    	a = parseInt(a);
		    	b = parseInt(b);
		    	if(a < 0 && b < 0){
		    		return a > b? 1: (a < b ? -1: 0);
		    	}else if(a > 0 && b < 0){
		    		return 1;
		    	}else if(a < 0 && b > 0){
		    		return -1;
		    	}
		    	return 0;
		    },
		    "activity-row-num-sort-desc": function(a, b) {
		    	a = parseInt(a);
		    	b = parseInt(b);
		    	if(a < 0 && b < 0){
		    		return a > b? 1: (a < b ? -1: 0);
		    	}else if(a > 0 && b < 0){
		    		return 1;
		    	}else if(a < 0 && b > 0){
		    		return -1;
		    	}
		    	return 0;		    	
		    },
		    "activity-priority-sort-asc": function(a, b){
		    	a = parseInt($(a).attr("priority"));
		    	b = parseInt($(b).attr("priority"));
		    	return a > b? 1: (a < b ? -1: 0);
		    },
			"activity-priority-sort-desc": function(a, b){
				a = parseInt($(a).attr("priority"));
		    	b = parseInt($(b).attr("priority"));
		    	return a > b? -1: (a < b ? 1: 0);
		    }
		});

		var $activityTable = $('#activity_table').dataTable({
			sDom: "<'row-fluid'<'span8'<'#newActivityError'>><'span4'f>r><'#table-content't><'row-fluid'<'span12'p>>",
			aoColumns: [
				{bSearchable: false, bVisible: false, sType: 'activity-row-num-sort'},
				{bSearchable: false, aDataSort: [0,1], sWidth: '90px', asSorting: ['desc', 'asc']},
				{aDataSort: [0,2]},
				{bSearchable: false, aDataSort: [0,3], sType: 'activity-priority-sort', sWidth: '100px'},				
				{bSearchable: false, aDataSort: [0,4], sWidth: '90px'},
				{bSortable: false},
				{bSearchable: false, bSortable: false}				
			],
			fnDrawCallback: function(oSettings) {
				$("#table-content").height($("#table-content").height());
			},
			oLanguage: {
				sSearch: '<spring:message code="text_search" text="Search" />:',
				oPaginate: {
			        sNext: '',
			        sPrevious: ''
			    },
			    sEmptyTable: "<spring:message code="text_noactivityfound" text="No Activity Found" />"
			}
		});
		
		$activityTable.fnSort([[1,'desc']]);
		var $errorContainer = $('#newActivityError');
		var showNewActivityError = function(errorMsg){
			$errorContainer.empty();
			$('<div class="alert alert-error fade in">'
			 +'	<button type="button" class="close" data-dismiss="alert">&times;</button>'
			 +' <span>'
			 + errorMsg
			 +' </span>'
			 +'</div>'
			).appendTo($errorContainer);
		}
		var $saveNewActivityBtn = $('#saveNewActivityBtn').click(function(){
			var $newActivityForm = $('<form style="display: none;" action="<%=request.getContextPath()%>/pages/activity" method="POST"><input type="submit"></form>');
			var invalid = false;
			$('#activity_table input[name="activityname"]').each(function(index){
				if(!this.value){
					invalid = true;
					$(this).css('background-color', '#F2DEDE');
					showNewActivityError('<spring:message code="message_error_activitynamenull" text="Normal" />');					
					return false;
				}
				$(this).css('background-color','');
				$('<input type="hidden" name="name">').val(this.value).appendTo($newActivityForm);
			});
			if(invalid){
				return;
			}
			$('#activity_table input[name="activitydate"]').each(function(index){
				$('<input type="hidden" name="planDate">').val(this.value).appendTo($newActivityForm);
			});
			$('#activity_table select[name="activitypriority"]').each(function(index){
				$('<input type="hidden" name="priority">').val(this.value).appendTo($newActivityForm);
			});
			$('#activity_table input[name="activityest"]').each(function(index){
				$('<input type="hidden" name="estimation">').val(this.value).appendTo($newActivityForm);
			});
			$('#activity_table textarea[name="activitydesc"]').each(function(index){
				$('<input type="hidden" name="description">').val(this.value).appendTo($newActivityForm);
			});
			$newActivityForm.appendTo(document.body);
			$newActivityForm[0].submit();
		});					

		var editableRowCount = 0;
		var newRowCount = -1;
		$('#newActivityBtn').click(function(){
			$activityTable.fnAddData([newRowCount--,"","","","","","",]);			
			var $firstRowTds = $("td",$activityTable.$("tr:first-child"));
			$('<input name="activitydate" type="text" class="insertedinput" readonly="true" style="cursor:default">').datepicker({
				autoclose: true,
				format: 'yyyy-mm-dd'
			}).val('<jsp:useBean id="today" class="java.util.Date" scope="page" /><fmt:formatDate value="${today}" pattern="yyyy-MM-dd"/>')
			.appendTo($firstRowTds[0]);
			
			$('<input type="text" name="activityname" class="insertedinput">').appendTo($firstRowTds[1]);			
			
			$('<select name="activitypriority">'
				+'<option value="0"><spring:message code="text_prioritynormal" text="Normal" /></option>'
				+'<option value="1"><spring:message code="text_priorityhigh" text="High" /></option>'
				+'<option value="2"><spring:message code="text_priorityveryhigh" text="Very High" /></option>'
			).appendTo($firstRowTds[2]).selectpicker({style: 'bootstrap-select-btn'});				
			
		    $($firstRowTds[3]).addClass('fuelux');
		    $('<div class="spinner">'
			 +'	<input type="text" class="input-mini spinner-input" name="activityest">'
		     +'	<div class="spinner-buttons btn-group btn-group-vertical">'
		     +'		<button class="btn spinner-up">'
		     +'			<i class="icon-chevron-up"></i>'
		     +'		</button>'
		     +'		<button class="btn spinner-down">'
		     +'			<i class="icon-chevron-down"></i>'
		     +'		</button>'
		     +'	</div>'
			 +'</div>'
			).appendTo($firstRowTds[3])
			.spinner({
				min: 1
			});
			
			$('<textarea name="activitydesc" class="insertedinput" style="height:20px;"></textarea>').appendTo($firstRowTds[4]);
						
			var $cancelBtn = $('<a class="btn btn-warning btn-block" href="#" title="<spring:message code="text_cancel" text="Cancel" />"><i class="icon-trash icon-white"></i></a>');			
			$cancelBtn.click(function(){
				$activityTable.fnDeleteRow($(this).parents("tr")[0]);
				if(--editableRowCount <= 0){
					$saveNewActivityBtn.hide();
				}
				editableRowCount = editableRowCount < 0? 0: editableRowCount;
			}).appendTo($firstRowTds[5]);
			
			$saveNewActivityBtn.show();			
			editableRowCount++;
			
			return false;
		});		
	</script>
</body>
</html>
